<template>
  <div class="home" v-show="curPageShow">
        <div class="jd_logo"><img src="../assets/img/jd_logo.png" alt=""></div>
        <div class="text">
            <!-- animated slideInRight -->
            <div class="home_1">
                <img src="../assets/img/home_1.png" alt="">
                <img class="home_1_dot" src="../assets/img/home_1_dot.png" alt="">
            </div>
            <!-- animated slideInDown -->
            <div class=""><img src="../assets/img/home_2.png" alt=""></div>
            <!-- animated slideInLeft -->
            <div class="home_3"><img src="../assets/img/home_3.png" alt=""></div>
        </div>
      <!-- <transition name="bounce"> -->
        <div class="home_button animated tada">
            <img src="../assets/img/btn_start.png" alt=""
            @click="start">
        </div>
      <!-- </transition> -->
  </div>
</template>
<script>
   import preLoadImg from '../mixins/preloadImg.js'
    export default {
        name:'home',
        mixins:[preLoadImg],
        data(){
            return{
                ruleShow:false
            }
        },
        methods:{
            start(){
                this.$store.dispatch('switchPage','rule')
            }
        },
        mounted(){
            this.preLoadImg()
        }
    }
</script>

<style scoped lang="scss">

    .home {
        position: relative;
        width: 100%;
        height: 100%;
        background: url('../assets/img/home.jpg') no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;

        .jd_logo{
            position: absolute;
            top:20%;
            left:50%;
            margin-left:-7.5%;
            width:15%;
            img{width:100%;}
        }
        .text{
            $width:43%;
            position: absolute;
            top:30%;
            left:50%;
            margin-left:-$width/2;
            margin-top:-20px;
            width: $width;
            height: 40px;
            img{
                width:100%;
            }
            .home_1{
                position: relative;
                .home_1_dot{
                    position: absolute;
                    top:-25%;
                    right:25%;
                    width:15%;
                }
            }
            .home_3{
                text-align: center;
                width:90%;
                padding-left: 10%;
                margin-top:5%;
            }
        }
        .home_button {
            $width:30%;
            position: absolute;
            top:57%;
            left:50%;
            margin-left:-$width/2;
            margin-top:-20px;
            width: $width;
            height: 40px;

            img {
                width: 100%;
                height: 100%;
            }
            animation-iteration-count: infinite;
            animation-duration:2s;
        }
    }

</style>

